<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色分配-菜单权限</title>
    <link rel="stylesheet" href="/components/treetable-lay/assets/layui/css/layui.css">
    <link rel="stylesheet" href="/components/treetable-lay/assets/common.css"/>
    <script src="/manage/js/app.js"></script>
</head>
<body>
<style>
    .layui-tree-branch {
        color: #EDCA50;
    }
</style>

<!-- 左边树 -->
<!--<div style="display: inline-block;float:left; width: 18%; height: 500px; padding: 10px; border: 1px solid #ddd; overflow: auto;margin-top: 4%">-->
<!--    <ul id="auth-tree"></ul>-->
<!--</div>-->

<div class="searchTable layui-form">
    <div class="layui-inline" style="padding-top:  2%;margin-left: 50%">
        <input type="checkbox" lay-filter="method" name="method" value="1" lay-skin="primary" title="GET"/>
        <input type="checkbox" lay-filter="method" name="method" value="2" lay-skin="primary" title="PUT"/>
        <input type="checkbox" lay-filter="method" name="method" value="3" lay-skin="primary" title="POST"/>
        <input type="checkbox" lay-filter="method" name="method" value="4" lay-skin="primary" title="DELETE"/>
    </div>
</div>
<!-- 菜单树，数据表格-->
<div style="float:left; margin-left: 3%;width: 95%;margin-top: 0%;">
    <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
</div>

<!-- 确认分配按钮  -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-warm layui-btn-sm" onclick="xijiaEventUpdClick()">确认分配</button>
        <!--  <button class="layui-btn layui-btn-warm layui-btn-sm" onclick="xijiaEventPutAuthority()">扫描权限</button>-->
        <!--  <button id="GET" class="layui-btn layui-btn-primary layui-btn-sm" onclick="xijiaSelected(1)">GET</button>-->
        <!--  <button id="PUT" class="layui-btn layui-btn-primary layui-btn-sm" onclick="xijiaSelected(2)">PUT</button>-->
        <!--  <button id="POST" class="layui-btn layui-btn-primary layui-btn-sm" onclick="xijiaSelected(3)">POST</button>-->
        <!--  <button id="DELETE" class="layui-btn layui-btn-primary layui-btn-sm" onclick="xijiaSelected(4)">DELETE</button>-->
        <font size="2">当前角色: </font> <font size="2" color="red" id="roleName">未选择</font>
    </div>
</script>

<script>

    let authorityListUrl = path + "/admin/authority/list";                           // 取消查询--查询所有(角色check)
    let authorityRefreshAuthorityUrl = path + "/admin/authority/refreshAuthority";   // 权限刷新扫描列表
    let roleUpdRoleAuthUrl = path + "/admin/role/updRoleAuth";                       // 角色URL权限修改

    let res;           // 后台返回完整菜单数据
    let checkData;     // 所有选中数据
    let roleId = "-1";   // 角色Id
    let roleName;      // 角色名称

    layui.config({
        base: '../components/treetable-lay/module/' //静态资源所在路径
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable', 'element', 'tree', 'form'], function () {
        // 复选框默认是否选中字段名
        layui.table = $.extend(layui.table, {config: {checkName: 'isChecked'}});
        // 获得菜单数据
        // res = Ajax.get(authorityListUrl);
        // xijiaRenderTable(res);         // 初始化右边 table 数据
        xijiaEventCheckbox();          // 监听复选框选中
        xijiaSelected();

        // 默认加载当前角色数据
        xijiaInit(parent.data)
    });


    /**
     * 回显当前选中
     * @param item 当前选中的角色行数据
     * @date  2019/11/16 0016 19:43
     * @return
     */
    function xijiaInit(item) {
        // 获得菜单数据
        res = Ajax.get(authorityListUrl + "?type=0&roleId=" + item.id);
        // 加载
        xijiaRenderTable();
        // 当前角色id
        roleId = item.id;
        roleName = item.name;
        // 展示当前角色名
        $("#roleName").html(roleName);
    }


    /**
     *     table数据--（抽离出来方便重载）
     *
     * @date  2019/11/16 0016 16:56
     * @return
     * @param params
     */
    function xijiaRenderTable() {
        // 渲染表格
        layer.load(2);
        layui.treetable.render({
            toolbar: '#toolbar',
            id: "te",                   // 定义Id--用于复选框获取数据
            treeColIndex: 1,            // 菜单列索引 ,加载展开图标
            treeSpid: 0,                // 顶级父id
            treeIdName: 'id',           // id 名称
            treePidName: 'pid',         // fid 名称
            treeDefaultClose: false,    // 是否默认折叠
            treeLinkage: false,         // 父级展开时是否自动展开所有子级
            elem: '#auth-table',        // table 的 div
            data: res.data,        // 直接加载数据
            done: function () {
                layer.closeAll('loading');
            },
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'desc', width: "40%", title: '接口描叙'},
                    {field: 'method', width: "20%", title: '请求方式'},
                    {field: 'url', width: "40%", title: '接口地址'},

                ]
            ]
        });
    }


    /**
     *     监听复选框选中
     * @date  2019/11/16 0016 19:43
     * @return
     */
    function xijiaEventCheckbox() {
        // obj = 选中行数据
        layui.table.on('checkbox(auth-table)', function (obj) {
            //console.log(JSON.stringify(obj))
            if (obj.type === "all") {
                // 更新所有选中数据te = 数据表格Id
                checkData = layui.table.checkStatus('te');
            } else if (obj.type === "one") {
                // 递归选中/取消选中
                isChecked(res.data, obj.data, obj.checked);
                WindowPos.onbeforeunload();  // 记录滚动条位置
                xijiaRenderTable(res);          // 重载数据
                WindowPos.onload();          // 还原滚动条位置
                // 更新所有选中数据te = 数据表格Id
                checkData = layui.table.checkStatus('te');
            }
            // 展示选中
            $("#roleName").html(roleName);
        });
    }

    /**
     *   遍历子节点判断--> 选中/ 取消选中
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/27 0027 17:14
     * @param nodeAll 所有节点
     * @param node 当前节点
     * @param checked 选中true / 取消false
     * @return
     */
    function isChecked(nodeAll, node, checked) {
        // 当菜单级别为3(页面时)，跳出，不往下递归
        if (node.pid !== '' && node.pid !== "0") {
            return;
        }
        // console.log("父菜单name=" + node.name + "")
        for (let i = 0; i < nodeAll.length; i++) {
            if (node.id === nodeAll[i].pid) {
                //赋值
                nodeAll[i].isChecked = checked;
                // console.log("id=" + nodeAll[i].id + "  name=" + nodeAll[i].name)
                //递归
                isChecked(nodeAll, nodeAll[i], checked)
            }
        }
    }


    /**
     * 选中指定请求的所有
     */
    var GET = false;
    var PUT = false;
    var POST = false;
    var DELETE = false;

    function xijiaSelected() {
        layui.form.on('checkbox(method)', function (data) {
            GET = false;
            PUT = false;
            POST = false;
            DELETE = false;
            $("input[name='method']:checked").each(function (i) {
                if ($(this).val() === "1") {
                    GET = true;
                }
                if ($(this).val() === "2") {
                    PUT = true;
                }
                if ($(this).val() === "3") {
                    POST = true;
                }
                if ($(this).val() === "4") {
                    DELETE = true;
                }
            });

            // 递归选中/取消选中
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].method === "GET") {
                    res.data[i].isChecked = GET;
                }
                if (res.data[i].method === "PUT") {
                    res.data[i].isChecked = PUT;
                }
                if (res.data[i].method === "POST") {
                    res.data[i].isChecked = POST;
                }
                if (res.data[i].method === "DELETE") {
                    res.data[i].isChecked = DELETE;
                }
            }
            // 父id, 如果自己存在选中,那就选中这个父id
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].pid === "" || res.data[i].pid === "0") {
                    for (let j = 0; j < res.data.length; j++) {
                        if (res.data[j].pid === res.data[i].id && res.data[j].isChecked) {
                            res.data[i].isChecked = true;
                        }
                    }
                    res.data[i].isChecked = GET;
                }
            }
            WindowPos.onbeforeunload();  // 记录滚动条位置
            xijiaRenderTable(res);       // 重载数据
            WindowPos.onload();          // 还原滚动条位置
            // 更新所有选中数据te = 数据表格Id
            checkData = layui.table.checkStatus('te');

            // 重载数据后显示角色
            $("#roleName").html(roleName);
            // 还原复选选中状态
            $("#method").find("input").each(function () {
                if ($(this).val() === "1" && GET) {
                    $(this).attr("checked", "");
                }
                if ($(this).val() === "2" && PUT) {
                    $(this).attr("checked", "");
                }
                if ($(this).val() === "3" && POST) {
                    $(this).attr("checked", "");
                }
                if ($(this).val() === "4" && DELETE) {
                    $(this).attr("checked", "");
                }
            });
        });
    }


    /**
     * 菜单权限分配( JS点击事件)
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/10 0010 0:05
     * @return
     */
    function xijiaEventUpdClick() {
        if (roleId === "-1") {
            layer.msg("没有选选择角色");
            return;
        }
        if (checkData === null || checkData === undefined || checkData.data === null) {
            layer.msg("没有可更新的内容");
            return;
        }
        // 获取数据
        let authIds = [];
        for (let i in checkData.data) {
            authIds[i] = checkData.data[i].id
        }
        // 拼接数据并修改
        let data = {
            roleId: roleId,
            authIds: authIds
        };
        let result = Ajax.put(roleUpdRoleAuthUrl, data);
        layer.msg(result.msg + " 当前角色拥有权限：" + checkData.data.length + "个 ")
    }

</script>
</body>
</html>
